<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf8" />
<!--SERVER_SIDE_SETTINGS-->
<meta name="keywords" content="GTJSTpl, GTJST, Template, template engine, JavaScript, cross-platform, 模板, 模板引擎, javascript template engine"/>
<meta name="description" content="GTJSTpl is a JavaScript-based, generally-targeted template language and engine. GTJSTpl是一种基于JavaScript的HTML模板语言及模板引擎, javascript template engine."/>
<title>GTJSTpl, Generally-Targeted JavaScript Template Engine</title>
</head>
<body><!-- contents of the body will be parsed and compiled by GTJSTpl -->
<style>span{ padding-top:30px; } a{ text-decoration:none; }</style>	
{include file="$pageheader"}

{include file="$model"}

{$i=Math.random()}
{var $jstr='this is a j string'}

<hr/>
<div id="mynewscontentlist">特征优势/Features
{foreach $newscontentlist as $page}
	<ul><li><a href="#">{$newscontentlist[$page]['title']}</a></li></ul>
{/foreach}
</div>
<hr/>

<span> Try to call a func named 'aFunc':
{$aFunc($i)}
</span>

<span>Call a built-in func:
{$jstr.substring(0, 12)}
</span>

<span id="randnum5"> <br/> Give random numbers:
{while $i<5}
	<li> line {$i} </li>
	{$i++}
{/while}
</span>

<span> <br/>Try to list an associative list:
{for (var $k in $userlist)}
	<li>Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/for}
</span>

<span> 2nd, try to list an associative list:
{for var $k in $userlist}
	<li>Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/for}
</span>

<span> 3rd, try to list an associative list:
{foreach $userlist as $k}
	<li onclick="javascript:bFunc('{$k}');">{$k} Id:{$userlist[$k]['id']}, Name:{$userlist[$k]['name']}</li>
{/foreach}
</span>

<span> try to branch-if-else: 
	{$i=Math.random()}
	{if $i < 0.3}
		<li>{$i} is lt 0.3</li>
	{else if $i<0.5 }
		<li>{$i} is lt 0.5</li>
	{else}
		<li>{$i} is gt 0.5</li>
	{/if}
</span>
<script>
	if(1==1){
		console.log("additional original scripts before jsondata will be invoked twice....."
			+ (new Date()));
	}
</script>

<hr/>
<!-- <a></a> -->
<!-- -->
<span id="literalarea">
Try literal:<br/>
{literal}
	{if $user['feedback'] == 2}
		{$user['age']}
	{/if}
{/literal}
</span>
<br/>
<div id="embeddedarea">
<span {if $user['feedback'] lt 3 } class="cls2"{else} class="cls3"{/if}> This is A SPAN with embedded Tpl sentence. </span>
<br/>
<a name="firsta"{if $user['feedback'] eq "fb2"} class="cls2"{/if}>This is a name.</a>

<a name="firstb" {if $user['feedback'] eq 2} class="cls3"{/if}> This is a name, 2nd. </a>
<br/>
<span {if $user['feedback'] gt 4} class="cls2"{else} class="cls3"{/if}> This is a span, 2nd. </span>

</div>

<hr/>

{include content="$pagefooter"}
<!-- "copyright_year": 2017, -->
<!-- GTJSTpl json data, content below this line will not be parsed by GTJSTpl -->
<div id="gtjstpljsondata">
{
	"pagetitle": "-gtjstpl, GTJSTpl",
	"newslist": {
		"0": {"title":"基于JavaScript通用HTML页面模板引擎", "href":"#11"},
		"1": {"title":"GTJSTpl模板语义, 语法及解析引擎", "href":"#10"},
		"2": {"title":"God's return to God, Caesar's return to Caesar; ", "href":"#9"},
		"3": {"title":"the backend runs in background, the frontend is executed in foreground.", "href":"#8"},
		"4": {"title":"上帝的归上帝, 凯撒的归凯撒; 后端的归后台, 前端的归前台", "href":"#7"}
	},
	"keywords": "Wadelau, Xenxin, GTJSTpl",
	"newslist_nextpage": "https://ufqi.com/#newlist_nextpage_value",
	"newscontentlist":{
		"0":{"title":"Runtime in client-side, reduce computing render in server-side; 客户端解析，节省服务器端计算资源;", "content":"Runtime in client-side, reduce computing render in server-side;", "pages":3},
		"1":{"title":"Language-independent, not-bound with backend scripts/languages; 模板语言独立，不与服务器端资源做任何绑定", "content":"Language-independent, not-bound with backend scripts/languages;", "pages":3},
		"2":{"title":"Totally-isolated between MVC, data transfer with JSON;  纯粹的MVC，层间数据用JSON格式传递", "content":"Totally-isolated between MVC, data transfer with JSON;", "pages":2},
		"3": {"title":"Full-support template tags with built-in logic and customerized JavaScript functions; 常见模板语言功能全支持，附带复杂而强大的JavaScript编程能力", "content":"Full-support template tags with built-in logic and customerized JavaScript functions;"},
		"4": {"title":"No more tags language to be learned, just JavaScript; 无学习成本，直接使用JavaScript书写模板语言....", "content":"No more tags language to be learned, just JavaScript;"}
	},
	"user": {
		"feedback": 2,
		"iname": {"surname":"Wadelau", "familyname":"Lau"},
		"age": "33"
	},
	"userlist": {
		"usera": {"id":1234, "name":"Alice张"},
		"userb": {"id":4567, "name":"Bob李"}
	},
	"atag": "Xenxin\"s Tag",
	"pageheader":"&lt;div id=\"header\"&gt;     &lt;div class=\"h_box\"&gt;       &lt;div class=\"logo\"&gt;&lt;a href=\"#\"&gt;GTJSTpl, Generally-Targeted JavaScript Template Engine&lt;/a&gt;&lt;/div&gt;       &lt;div class=\"menu\"&gt;         &lt;ul&gt;           &lt;li&gt;&lt;a href=\"gtjstpl.demo.html?ri=\"&gt;首页&lt;/a&gt;&lt;/li&gt;           &lt;li&gt;&lt;a href=\"#\"&gt;关于GTJSTpl&lt;/a&gt;             &lt;div class=\"submenu\"&gt;               &lt;ul&gt;                   &lt;li class=\"title\"&gt;&lt;a href=\"#\"&gt;GTJSTpl介绍&lt;/a&gt;&lt;/li&gt;                   &lt;li class=\"title\"&gt;&lt;a href=\"#\"&gt;GTJSTpl品牌&lt;/a&gt;&lt;/li&gt;   &lt;/ul&gt;             &lt;/div&gt;           &lt;/li&gt;          &lt;li&gt;&lt;a href=\"#\" class=\"active\"&gt;GTJSTpl in 新闻&lt;/a&gt;&lt;/li&gt;  &lt;/ul&gt;       &lt;/div&gt;     &lt;/div&gt;     &lt;div class=\"clear\"&gt;&lt;/div&gt;   &lt;/div&gt;",
	
	"model":"&lt;div class=\"news\"&gt;           &lt;div class=\"title\"&gt;GTJSTpl新闻/News&lt;/div&gt;           &lt;div class=\"content\"&gt;             &lt;ul class=\"cont\" tpldata=\"newslist::repeat::\"&gt; 			{for (var $k in $newslist)}               &lt;li&gt;&lt;a class=\"btn_show\" href=\"{$newslist[$k]['href']}\"&gt;&gt; {$newslist[$k]['title']} 		&lt;a name=\"atag\" tpldata=\"atag::updatevalue\"&gt;{$newslist[$k]['title']}&lt;/a&gt; 	&lt;/a&gt; 				{if $newslist[$k]['title'].length &gt; 25 } 	&lt;span&gt;Length is too long!&lt;/span&gt; 				{else} 					&lt;span&gt;Length is okay.&lt;/span&gt; 				{/if} 			  &lt;/li&gt; 			{/for}    &lt;/ul&gt;           &lt;/div&gt;           &lt;div class=\"pages\"&gt;             &lt;ul&gt;           &lt;li&gt;&lt;a href=\"javascript:;\" tpldata=\"newslist_nextpage::updateattribute::href\" href=\"{$newslist_nextpage}\"&gt; 下一页 &lt;/a&gt;&lt;/li&gt;             &lt;/ul&gt;           &lt;/div&gt;         &lt;/div&gt;",
	
	"pagefooter":"&lt;div id=\"footer\"&gt;   &lt;script&gt; 	if(1==1){console.log(\"2nd 1==1.\"+(new Date()));} 	else if(2==2) 	{if(3==3){console.log(\"2nd 3==3\"+(new Date()));};}; function aFunc(myi){if (1==1){console.log(\"this is in aFunc \"+(new Date())+''+myi); return ('now:'+(new Date())+''+myi);}}   &lt;/script&gt;     &lt;div class=\"f_box\"&gt;       &lt;div class=\"f_logo\"&gt;         &lt;/div&gt;      &lt;div class=\"f_menu\"&gt;         &lt;ul&gt;           &lt;li&gt;&lt;a href=\"#\"&gt;联系GTJSTpl&lt;/a&gt;&lt;/li&gt;   &copy; &lt;span tpldata=\"copyright_year::updatevalue::\"&gt;{$copyright_year}&lt;/span&gt; &lt;a href=\"/\"&gt;-UFQI&lt;/a&gt;. All rights reversed.&lt;/li&gt;         &lt;/ul&gt;       &lt;/div&gt;       &lt;div class=\"allright_2\" onclick=\"javascript:if(1==1){aFunc();}else{if(1==1){aFunc();}}\"&gt;GTJSTpl, Generally-Targeted JavaScript Template Engine&lt;/div&gt;     &lt;/div&gt;   &lt;/div&gt;"
}
</div>

<!-- 
@todo include with scripts
	---- done, Dec 04, 2018 
-->
<script>
if(1==1){
	console.log("additional original scripts after jsondata will be invoked only once....."
		+ (new Date()));
}

//-
function bFunc(myi){
	console.log("this is in bFunc "+(new Date())+''+myi); return ('now:'+(new Date())+''+myi);
}
	
</script>
<!-- gtjstpl codes -->
<script type="text/javascript" async>
window.GTJSTpl = {'JsonDataId':'gtjstpljsondata', 'IsDebug': true}; // optional
</script>
<script type="text/javascript" src="gtjstpl.js" async></script>
<noscript>JavaScript Required.</noscript>
</body>
</html>